<template>
  <div class="field-wrapper">
    <div class="static-content-item selected">
      <slot></slot>
    </div>
    <template v-if="true">
      <div class="field-action" v-if="true">
        <i title="删除组件" @click.stop="removeFieldWidget">
          <SvgIcon icon-class="el-delete" />
        </i>
      </div>

      <div class="drag-handler background-opacity" v-if="true">
        <i title="拖拽手柄"><SvgIcon icon-class="el-drag-move" /></i>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import SvgIcon from '@/designer/svgIcon'
  const parentData = defineProps({
      data:{
          type: String,
          name: String
       }
  });

</script>

<style lang="scss" scoped>
   $--color-primary: #409EFF;
  .field-wrapper {
    position: relative;

    .field-action{
      position: absolute;
      //bottom: -24px;
      bottom: 0;
      right: -2px;
      height: 22px;
      line-height: 22px;
      background: $--color-primary;
      z-index: 9;

      i {
        font-size: 14px;
        color: #fff;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .drag-handler {
      position: absolute;
      top: 0;
      //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
      left: -1px;
      height: 20px;
      line-height: 20px;
      //background: $--color-primary;
      z-index: 9;

      i {
        font-size: 12px;
        font-style: normal;
        color: #fff;
        margin: 4px;
        cursor: move;
      }

      &:hover {
        //opacity: 1;
        background: $--color-primary;
      }
    }
  }

  .field-action, .drag-handler {
    :deep(.svg-icon) {
      margin-left: 0.1em;
      margin-right: 0.1em;
    }
  }

  .static-content-item {
    min-height: 20px;
    display: flex;  /* 垂直居中 */
    align-items: center;  /* 垂直居中 */

    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }
  .el-form-item.selected, .static-content-item.selected {
    outline: 2px solid $--color-primary;
  }
</style>
